<template>
  <a-card class="card" hoverable active-tab-key="key" :tab-list="[{key: 'key',tab: title}]">
    <a-skeleton :loading="loading" active :paragraph="{rows:6,width:'100%'}">
      <slot v-if="$slots.content" name="content"></slot>
      <a-list
      v-else
      :grid='{ gutter: 24, xl: col, lg: col, md: col, sm: col, xs: 1 }'
      style="margin: 0 -8px">
        <a-list-item v-for="(item,index) in list" :key="index" style="padding: 0 8px">
          <router-link :to="'/home/list/'+key+'/'+item.id">
            <a-card type="inner" hoverable>
              <img slot="cover" :src="item.src" height="130"/>
              <a-card-meta :title="item.title">
                <div class="text-hide" slot="description" style="width:100%;">来源:  {{item.author}}</div>
              </a-card-meta>
              <div class="content">
                <span  >{{item.time}}</span>
                <span style="text-align:end;"><a-icon type="eye" style="margin-right:6px;"/>{{item.viewer}}</span>
              </div>
            </a-card>
          </router-link>
        </a-list-item>
      </a-list>
    </a-skeleton>
    <a slot="tabBarExtraContent" :href="path" style="cursor:pointer;"><a-icon type="more"/></a>
  </a-card>

</template>
<script>

export default {
  name: 'HomeCard',
  props: {
    title:{
      type: String
    },
    loading: {
      type: Boolean,
    },
    col: {
      type: [String,Number],
      default: 4,
    },
    list:{
      type: Array,
      default:()=>{
        return [];
      }
    },
    path:{
      type: String,
      default: 'javascript:;'
    }
  },
  computed:{
    key(){
      let list = this.path.split('/')
      return list[list.length-1];
    }
  }
}
</script>
<style lang="less" scoped>
  .card{
    min-height: 370px;
    /deep/.ant-card-type-inner .ant-card-body{
      padding: 16px;
    }
    /deep/.ant-tabs-tab{
      cursor: default;
    }
    .content{
      display: flex;
      margin-top: 16px;
      margin-bottom: -4px;
      line-height: 20px;
      height: 20px;
      & > span {
        color: @text-color-second;
        flex: 1;
        font-size: 12px;
      }
      .avatarList {
        flex: 0 1 auto;
      }
    }
    a{
      color: @text-color-second;
      font-size: 18px;
    }
    a:hover{
      color: @primary-color;
    }
  }
  .text-hide{
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>